<template>
  <div class="clearfix">
    <a-upload
      v-model:file-list="fileList"
      list-type="picture-card"
      @preview="handlePreview"
      @change="handleChange"
      :before-upload="beforeUpload"
      :customRequest="customRequest"
      :remove="handleRemove"
    >
      <div v-if="fileList.length <num">
        <plus-outlined />
        <div class="ant-upload-text">{{desc}}</div>
      </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>
<script>
import { PlusOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { defineComponent, ref } from 'vue';
 
import {uploadFile} from "/@/api/app"
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);

    reader.onload = () => resolve(reader.result);

    reader.onerror = error => reject(error);
  });
}

export default defineComponent({
  components: {
    PlusOutlined,
  },
  props:{
     desc:{
       type:String,
       default:"图片上传"
     },
     num:{
       type:Number,
       default:1
     }
  },
 emits: {
    "sendStatus": null,
  },
  setup(props,context) {
 
    const previewVisible = ref(false);
    const previewImage = ref('');
    const list=ref([]);
    const fileList = ref([
    //   {
 
   
    //   status: 'done',
    //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    // }, {
    
    //   status: 'done',
    //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    // }
     ]);

    const handleCancel = () => {
      previewVisible.value = false;
    };

    const handlePreview = async file => {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }

      previewImage.value = file.url || file.preview;
      previewVisible.value = true;
    };

    const handleChange = ({
      fileList: newFileList,
    }) => {
      
      fileList.value = newFileList;
    };
   const  beforeUpload=(file) =>{
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        message.error('图片格式不正确')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        message.error('图片超过2M')
      }
      return isJpgOrPng && isLt2M
    };
     const customRequest=(data) =>{
      const formData = new FormData()
      var file = data.file
      formData.append('img', file)
      uploadFile(formData).then((res) => {
           const { code, result:{data:url} } = res
         
            list.value.push(url);
              data.onSuccess();
          
              context.emit("sendStatus", list.value);
      }).catch((error) => {
          data.onError() //上传失败
        })
    };
    const  handleRemove=(file)=> {
      const index = fileList.value.indexOf(file)
      list.value.splice(index,1);
      context.emit("sendStatus", list.value);
    };
    return {
      previewVisible,
      previewImage,
      fileList,
      handleCancel,
      handlePreview,
      handleChange,
      beforeUpload,
      customRequest,
      handleRemove,
      list
    };
  },

});
</script>
<style>
/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>